{% extends "base.html" %}

{% block title %}容器{% endblock %}

{% block head %}
{{ super() }}
<!-- DataTables -->
<link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
{% endblock %}


{% block content %}
<!-- 页面头 -->
<section class="content-header">
  <!--头部标题-->
  <h1>
    容器
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li><a href="/blues/blues/clusterler/cluster">集群管理</a></li>
    <li>工作负载</li>
    <li>详情</li>
    <li class="active">容器</li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <!--表格1-->
      <div class="box">
        <!--        <div class="box-header">-->
        <!--          <h3 class="box-title">节点概览</h3>-->
        <!--        </div>-->
        <div class="box-body">
          <table id="example1" class="table-hover table-bordered table-condensed table-striped" style="width:100%;font-size: 90%">
            <thead>
            <tr>
              <th>容器名</th>
              <th>镜像</th>
              <th>就绪</th>
              <th>重启次数</th>
              <th>信息</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
          </table>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->

    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>
<!-- /.页面内容 -->
{% endblock %}


{% block script %}
<!-- DataTables -->
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- Page specific script -->
<script type="text/javascript">
    // 页面载入完毕后执行接口调用
    $(document).ready(function () {
        var pathName = window.document.location.pathname;
        var pathList = pathName.split("/")
        var cluster_id = pathList[2]
        var namespace = pathList[3]
        var pod = pathList[5]
        var url = '/api/v1/cluster/' + cluster_id + '/' + namespace + '/containers/' + pod

        $.get(url, function (result) {
            console.log(result)
            for (var i in result.spec.containers) {
                var container = result.spec.containers[i].name
                var text = '<tr>'
                text += '<td>' + container + '</td>'
                text += '<td>' + result.spec.containers[i].image + '</td>'
                text += '<td>' + result.status.containerStatuses[i].ready + '</td>'
                text += '<td>' + result.status.containerStatuses[i].restartCount + '</td>'
                text += '<td>' + JSON.stringify(result.status.containerStatuses[i].state) + '</td>'

                let ws_url = '/cluster/logs/' + cluster_id + '/' + namespace + '/' + pod + '/' + container
                let exec_url = '/cluster/terminal/' + cluster_id + '/' + namespace + '/' + pod + '/' + container
                text += '<td><a href="' + ws_url + '">日志 </a>'
                text += '<a href="' + exec_url + '">命令行 </a>'
                text += '</td></tr>'

                $('#tbody').append(text)

            }
        })
    })
</script>
{% endblock %}